<template>
  <view class="user-page">
    <!-- 头部用户信息区域 -->
    <view class="header">
      <view class="user-avatar">👤</view>
      <view class="login-section">
        <view class="login-text" @tap="handleLogin">登录/注册</view>
        <view class="member-text">成为会员，解锁福利</view>
      </view>
    </view>

    <!-- 账户信息区域 -->
    <view class="account-info">
      <view class="balance">
        <text class="balance-label">金额</text>
        <text class="balance-amount">{{ balance }}</text>
      </view>
      <view class="detail-link" @tap="goToDetail">我的明细</view>
    </view>

    <!-- 轮播图区域 -->
    <view class="banner">
      <!-- 轮播图内容 -->
      <swiper class="banner-swiper" :autoplay="true" :autoplay-interval="3000" :circular="true" indicator-dots
        disable-touch="false">
        <swiper-item v-for="(item, index) in banners" :key="index">
          <image :src="item.image" mode="widthFix" class="banner-image" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 商品分类导航 -->
    <view class="category-nav">
      <view v-for="(category, index) in categories" :key="index" class="category-item"
        :class="{ active: activeCategory === index }" @tap="changeCategory(index)">
        {{ category.name }}
      </view>
    </view>

    <!-- 商品卡片区域 -->
    <view class="product-card-container">
      <view class="product-card" v-for="item in filteredProducts" :key="item.id">
        <image :src="item.image" mode="aspectFill" class="product-image" />
        <view class="product-info">
          <text class="product-name">{{ item.name }}</text>
          <text class="product-desc">{{ item.desc }}</text>
          <text class="product-price">¥{{ item.price }}</text>
          <nut-button class="buy-button" type="primary" size="small" @tap="handleBuy(item.id)">购买</nut-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue';
import Taro from '@tarojs/taro';
// import indexConfig from './index.config';
import { initShare } from "@/utils/config";


/**
 * 用户余额状态
 * @type {import('vue').Ref<number>}
 */
const balance = ref(0);

/**
 * 当前激活的导航tab
 * @type {import('vue').Ref<number>}
 */
const activeTab = ref(0);

// 轮播图数据
const banners = ref([
  { image: 'https://picsum.photos/id/10/800/400' },
  { image: 'https://picsum.photos/id/11/800/400' },
  { image: 'https://picsum.photos/id/12/800/400' }
]);

// 商品分类
const categories = ref([
  { name: '全部', id: 0 },
  { name: '食品', id: 1 },
  { name: '服装', id: 2 },
  { name: '数码', id: 3 }
]);

// 当前激活的商品分类
const activeCategory = ref(0);

// 所有商品数据
const allProducts = ref([
  {
    id: 1,
    name: '示例食品1',
    desc: '这是示例食品1的描述',
    price: 99,
    image: '@/assets/imgs/food1.png',
    categoryId: 1
  },
  {
    id: 2,
    name: '示例食品2',
    desc: '这是示例食品2的描述',
    price: 129,
    image: '@/assets/imgs/food2.png',
    categoryId: 1
  },
  {
    id: 3,
    name: '示例服装1',
    desc: '这是示例服装1的描述',
    price: 89,
    image: '@/assets/imgs/clothes1.png',
    categoryId: 2
  },
  {
    id: 4,
    name: '示例服装2',
    desc: '这是示例服装2的描述',
    price: 159,
    image: '@/assets/imgs/clothes2.png',
    categoryId: 2
  },
  {
    id: 5,
    name: '示例数码1',
    desc: '这是示例数码1的描述',
    price: 599,
    image: '@/assets/imgs/digital1.png',
    categoryId: 3
  },
  {
    id: 6,
    name: '示例数码2',
    desc: '这是示例数码2的描述',
    price: 899,
    image: '@/assets/imgs/digital2.png',
    categoryId: 3
  }
]);

// 计算当前分类下的商品
const filteredProducts = computed(() => {
  if (activeCategory.value === 0) {
    return allProducts.value;
  }
  return allProducts.value.filter(item => item.categoryId === categories.value[activeCategory.value].id);
});

/**
 * 切换商品分类
 * @param {number} index - 分类索引
 */
const changeCategory = (index) => {
  activeCategory.value = index;
};

/**
 * 处理购买按钮点击
 * @param {number} id - 商品ID
 */
const handleBuy = (id) => {
  Taro.navigateTo({
    url: `/pages-detail/detail/index?id=${id}`
  });
};

/**
 * 处理登录按钮点击
 * 性能优化：使用 Taro.navigateTo 进行页面跳转
 */
const handleLogin = () => {
  Taro.navigateTo({
    url: '/pages-detail/login/login'
  });
};

/**
 * 跳转到明细页面
 * 性能优化：预加载明细数据提升用户体验
 */
const goToDetail = () => {
  console.log('我的明细')
  Taro.navigateTo({
    url: '/pages-detail/my/balance'
  });
};

/**
 * 切换导航栏tab
 * 性能优化：使用switchTab提升导航体验
 * @param {number} index - tab索引
 * @param {string} url - 页面路径
 */
const switchTab = (index, url) => {
  activeTab.value = index;

  // 判断是否为tabbar页面
  const tabbarPages = ['/pages/home/index', '/pages/my/index'];

  if (tabbarPages.includes(url)) {
    Taro.switchTab({ url });
  } else {
    Taro.navigateTo({ url });
  }
};

// 分享给好友
// Taro.useShareAppMessage(() => {
//   return {
//     title: '江西',
//     path: '/pages/cate/index',
//     // imageUrl: ''
//   }
// });

// 分享到朋友圈
// Taro.useShareTimeline(() => {
//   return {
//     title: '森链智选',
//     path: '/pages/home/index',
//     imageUrl: '@/assets/imgs/share.png'
//   }
// });

// 页面加载时显示分享菜单
// onMounted(() => {
//   Taro.showShareMenu({
//     withShareTicket: true,
//     menus: ['shareAppMessage', 'shareTimeline']
//   });
// });
// onMounted(() => {
//   Taro.showShareMenu({
//     menus: ['shareAppMessage', 'shareTimeline']
//   })
// })
</script>

<style lang="scss">
/* 用户页面容器 */
.user-page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 头部区域 */
.header {
  display: flex;
  align-items: center;
  height: 250rpx;
  // padding: 40rpx 30rpx;
  background-color: #fff;
  border-radius: 0 0 10% 10%;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  .user-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    margin-right: 24rpx;
  }

  .login-section {
    flex: 1;
    display: flex;
    flex-direction: column;

    .login-text {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
      margin-bottom: 8rpx;
    }

    .member-text {
      font-size: 24rpx;
      color: #999;
    }
  }
}

/* 账户信息区域 */
.account-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin: 0 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  .balance {
    display: flex;
    align-items: center;
    gap: 16rpx;

    .balance-label {
      font-size: 28rpx;
      color: #666;
    }

    .balance-amount {
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
    }
  }

  .detail-link {
    font-size: 28rpx;
    color: #0066cc;
    padding: 12rpx 24rpx;
    border: 2rpx solid #0066cc;
    border-radius: 24rpx;
    background-color: transparent;
  }
}

// 轮播图区域
.banner {
  height: 200rpx;
  overflow: hidden;
  margin-bottom: 28rpx;
  background-color: #f5f5f5;
}

.banner-swiper {
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 商品分类导航 */
.category-nav {
  display: flex;
  background-color: #fff;
  height: 80rpx;
  align-items: center;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.category-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 16rpx 0;
  position: relative;

  &.active {
    color: #0066cc;
    font-weight: bold;
  }

  &.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 4rpx;
    background-color: #0066cc;
  }
}

/* 商品卡片容器 */
.product-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
}

/* 商品卡片样式 */
.product-card {
  width: calc(50% - 20rpx);
  margin-bottom: 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  height: 280rpx;
}

.product-info {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-desc {
  font-size: 24rpx;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-price {
  font-size: 32rpx;
  color: #e64340;
  font-weight: bold;
  margin-top: 10rpx;
}

.buy-button {
  margin-top: 15rpx;
}

/* 为底部导航栏预留空间 */
// .user-page {
//   padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
// }</style>